<template>
  <ElForm class="drawer-detail" label-width="90px" label-position="left">
    <div class="drawer-detail-header-title">{{ data.customerName }}</div>
    <div class="drawer-detail-header">
      <div>
        <div class="drawer-detail-tags">
          <div class="drawer-detail-tag">{{ data.followUpStatus }}</div>
          负责人：{{ data.masterName }}
        </div>

        <div class="drawer-detail-sub-title">
          <span>创建人: {{ data.createUserName }}</span>
          <span>创建时间: {{ data.createTime }}</span>
          <span>更新时间: {{ data.updateTime }}</span>
        </div>
      </div>
      <div>
        <ElButton v-if="auth.has('add')" link type="primary" @click="onEditShop(props.row)">编辑</ElButton>
        <ElButton v-if="auth.has('edit')" link type="primary" @click="onChangeArchiving(props.row)">
          {{ props.row.archivingStatus ? '取消归档' : '归档' }}
        </ElButton>
        <ElButton v-if="auth.has('edit')" link type="primary" @click="onMove(props.row)">移交</ElButton>
        <ElButton v-if="auth.has('edit')" link type="primary" @click="onRemoveMaste(props.row)">删除负责人</ElButton>
      </div>
    </div>


    <div class="drawer-detail-body">
      <div class="drawer-detail-left">
        <div class="drawer-detail-form-title">基础信息</div>
        <ElFormItem label="客户名称">{{ data.customerName }}</ElFormItem>
        <ElFormItem label="客户联系方式">
          <div>
            <div v-for="(item, index) in contactJson" :key="index">
              {{ item.type }}/{{ item.no }}
            </div>
          </div>
        </ElFormItem>
        <ElFormItem label="负责人">{{ data.masterName }}</ElFormItem>
        <ElFormItem label="客户状态">{{ data.customerStatus }}</ElFormItem>
        <ElFormItem label="跟进状态">{{ data.masterName }}</ElFormItem>
        <ElFormItem label="流失原因">{{ data.followUpStatus }}</ElFormItem>
        <ElFormItem label="结束合作原因">{{ data.endCooperation }}</ElFormItem>
      </div>
      <div class="drawer-detail-right">
        <div class="drawer-detail-form-title">其他信息</div>
        <ElFormItem label="客户来源">{{ data.customerSource }}</ElFormItem>
        <ElFormItem label="客户分级">{{ data.customerLvl }}</ElFormItem>
        <ElFormItem label="店铺平台">{{ data.platformName }}</ElFormItem>
        <ElFormItem label="店铺经营类别">{{ data.shopTypeName }}</ElFormItem>
        <ElFormItem label="收费模式">{{ data.feeType }}</ElFormItem>
        <ElFormItem label="收费金额">{{ data.feeAmount }}</ElFormItem>
        <ElFormItem label="重要程度">
          <ElRate :model-value="data.importanceLevel" disabled size="small"/>
        </ElFormItem>
        <ElFormItem label="店铺链接">{{ data.shopLinkUrl }}</ElFormItem>
        <ElFormItem label="商机分析">{{ data.businessAnalysis }}</ElFormItem>
        <ElFormItem label="客户需求">{{ data.customerDemand }}</ElFormItem>
        <ElFormItem label="备注">{{ data.remark }}</ElFormItem>
        <ElFormItem label="聊天记录">
          <ElUpload
              size="small"
              :file-list="fileList"
              action=""
              list-type="picture-card"
              disabled
              :on-preview="onPictureCardPreview"
          >
          </ElUpload>
          <ElDialog v-model="visible">
            <img w-full :src="imageUrl" alt="Preview Image"/>
          </ElDialog>
        </ElFormItem>
      </div>
      <div class="drawer-detail-right">
        <div class="drawer-detail-form-title">跟进记录</div>
        <div style="display: flex; flex-direction: column; gap: 10px;">
          <div style="background-color: #f2f2f3; padding: 7px 12px; gap: 5px;display: flex; flex-direction: column;"
               v-for="(item, index) in consultRecordList" :key="index">
            <span style="color: #bebebf;font-size: 12px;margin-bottom: 5px  ">{{ item.recordDate }}</span>
            <span style="font-size: 16px;font-weight: 600;">{{ userInfo.name }}</span>
            <span style="color: #5983f1;font-size: 14px;">{{ item.recordType }}</span>
            <span style="color: #bebebf;font-size: 14px;">
              {{ item.recordContent }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </ElForm>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import type {UploadFile} from 'element-plus'
import {useAuth} from '@/utils/auth'
import {editDialog, masterDialog} from '../dialog'
import {changeArchiving, deleteMaster, getConsultRecordList} from '../../api'
import {getUserInfo} from "@/api";

const auth = useAuth()

function getFileName(url) {
  const l = url.split('/')
  return l[l.length - 1] || ''
}

interface Props {
  row: any
}

const props = withDefaults(defineProps<Props>(), {
  row: () => ({})
})

const emit = defineEmits()

const data = computed(() => props.row || {})

const contactJson = computed(() => {
  if (!data.value.contactJson) return []
  return JSON.parse(data.value.contactJson)
})

const fileList = computed(() => {
  if (!data.value.chatHistory) return []
  return data.value.chatHistory.split(',').map(i => ({
    name: getFileName(i),
    url: i
  }))
})

const visible = ref(false)
const imageUrl = ref('')
const onPictureCardPreview = (file: UploadFile) => {
  imageUrl.value = file.url!
  visible.value = true
}

const onEditShop = async (row) => {
  await editDialog.open({row})
  emit('success')
  emit('close')
}

const onChangeArchiving = async row => {
  await changeArchiving({
    "consultId": row.consultId,
    "archivingStatus": row.archivingStatus ? 0 : 1
  })
  emit('success')
  emit('close')
}

const onMove = async row => {
  await masterDialog.open({row})
  emit('success')
  emit('close')
}

const onRemoveMaste = async row => {
  await deleteMaster({
    "consultId": row.consultId
  })
  emit('success')
  emit('close')
}

const consultRecordList = ref([])
const userInfo = ref({})
onMounted(async () => {
  userInfo.value = await getUserInfo();
  consultRecordList.value = await getConsultRecordList({
    "consultId": props.row.consultId
  })
})

</script>

<style scoped lang="scss">
.drawer-detail {
  padding: 20px;

  &-header-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin-bottom: 4px;
  }

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }

  &-tags {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #333333;
  }

  &-tag {
    padding: 0 5px;
    display: flex;
    align-items: center;
    height: 20px;
    background: #FFECE1;
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FF5A00;
    margin-right: 8px;
  }

  &-sub-title {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #757575;
    margin-top: 10px;

    & > span {
      margin-right: 25px;
    }
  }

  &-body {
    margin-top: 15px;
    display: flex;
    align-items: stretch;
  }

  &-left {
    width: 400px;
    padding-left: 10px;
    flex-shrink: 0;
  }

  &-right {
    flex-grow: 1;
    padding-left: 10px;
  }

  &-form-title {
    margin-left: -10px;
    height: 34px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 13px;
    color: #757575;

    &::before {
      box-sizing: border-box;
      content: '';
      display: inline-block;
      width: 7px;
      height: 10px;
      border: 2.4px solid #3778FB;
      border-radius: 2px;
      margin-right: 5px;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__label) {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    text-align: right;
  }

  :deep(.el-form-item__content) {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #333333;
  }

  :deep(.el-upload.el-upload--picture-card) {
    display: none;
  }
}
</style>
